Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add HTML content transformer middleware #5338

Merged
merged 11 commits into from
Oct 29, 2024

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Oct 29, 2024

Fixes #

Changelog Entry

Breaking changes

  • HTML sanitizer is moved from renderMarkdown to HTML content transformer middleware, please refer to PR #5338
    • If you customized renderMarkdown with a custom HTML sanitizer, please move the HTML sanitizer to the new HTML content transformer middleware

Added

  • Added HTML content transformer middleware, in PR #5338, by @compulim
    • HTML content transformer is used by useRenderMarkdown to transform the result from renderMarkdown
    • HTML sanitizer is moved from renderMarkdown into HTML content transformer for better coverage
    • Copy button is added to fenced code blocks (<pre><code>)

Description

Refactored part of renderMarkdown into HTML content transformer: sanitizer and copy button.

This is to support code blocks syntax highlighting (#5335) in Markdown. Another PR will bring syntax highlighting to Markdown fenced code blocks shortly.

Design

Today, our renderMarkdown do a couple of things:

  • Renders Markdown as HTML
  • "Better link" adds accessibility and security features to all links
  • Add "Copy button" to all fenced code blocks (<pre><code>)
  • HTML sanitizer

In this PR, we are refactoring the "copy button" and HTML sanitizer into a middleware of their own. We will port "better link" later.

This will help web devs who customized renderMarkdown to sanitize the output HTML without additional efforts. Web devs can bring their own HTML sanitizer.

Specific Changes

  • Added htmlContentTransformerMiddleware
  • Ported "code blocks copy button" to the default HTML content transformer middleware
  • Ported sanitize-html to the default HTML content transformer middleware
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@compulim compulim marked this pull request as ready for review October 29, 2024 11:38
OEvgeny
OEvgeny previously approved these changes Oct 29, 2024
@OEvgeny OEvgeny self-requested a review October 29, 2024 18:27
@OEvgeny OEvgeny merged commit 06bf029 into microsoft:main Oct 29, 2024
25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants